<template>
  <div>
    <swiper class="swiper" ref="mySwiper" :options="swiperOptions">
      <swiper-slide class="swiper-slide" :key='idx' v-for="(el,idx) in list">
        <div class="itemView" @click="onClick(el)">
          <img :src="el.smallPic"/>
          <p class="ellipsis2">{{el.title}}</p>
        </div>
      </swiper-slide>
    </swiper>
  </div>

</template>

<script>
  import {Swiper, SwiperSlide} from 'vue-awesome-swiper'

  export default {
    props: ['list'],
    components: {
      Swiper,
      SwiperSlide
    },
    data () {
      return {
        swiperOptions: {
          slidesPerView: 'auto',
          spaceBetween: 8,
          freeMode: true
        }
      }
    },
    methods: {
      onClick (el) {
        this.$_router.push(`/plan/${el.id}`)
      }
    }
  }
</script>

<style scoped>
  .swiper {
    padding-left: 20px;
    padding-right: 20px;
  }

  .swiper-slide {
    width: auto;
    /*根据内容调整宽度*/
  }


  .imgBack {
    width: 100%;
    border-radius: 4px;
    height: 0;
    padding-bottom: 56.25%;
    overflow: hidden;
  }

  .itemView {
    width: 140px;
    height: 48px;
    position: relative;
  }

  .itemView > img {
    border-radius: 4px;
    width: 140px;
    height: 48px;
    position: absolute;
    z-index: 1;
    object-fit: cover;
  }

  .itemView > p {
    top: 50%;
    transform: translate(0, -50%);
    position: absolute;
    z-index: 2;
    color: white;
    font-weight: bold;
    font-size: 12px;
    left: 48px;
  }
</style>
